const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') 

var getHtmlConfig = function(name){
    return{
        template: './src/view/' + name + '.html',
        filename: 'view/' + name + '.html',
        inject: true,
        hash: true,
        chunks: ['common',name], //网页用的js和css
        minify: {
            collapseWhitespace: false
        }
    }
}

module.exports = {
    entry: {
        'index':['./src/page/index/index.js'],

        'account/login':['./src/page/account/login/index.js'],
        'account/register':['./src/page/account/register/index.js'],
        'account/account-info':['./src/page/account/account-info/index.js'],
        'account/myAccount':['./src/page/account/myAccount/index.js'],

        'catalog/catalog-main':['./src/page/catalog/catalog-main/index.js'],
        'catalog/catalog-list':['./src/page/catalog/catalog-list/index.js'],
        'catalog/item':['./src/page/catalog/item/index.js'],
        'catalog/search-products':['./src/page/catalog/search-products/index.js'],

        'cart/cart':['./src/page/cart/cart/index.js'],
        'cart/checkout':['./src/page/cart/checkout/index.js'],

        'order/confirm-order':['./src/page/order/confirm-order/index.js'],
        'order/my-orders':['./src/page/order/my-orders/index.js'],
        'order/new-order-form':['./src/page/order/new-order-form/index.js'],
        'order/view-order':['./src/page/order/view-order/index.js'],
    },
    output:{
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer:{
        port : 8888,
        static:{directory: path.join(__dirname, 'dist')}
    },
    module:{
        rules : [
            {
                test: /\.css$/, 
                use:[
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath:'../'
                    }
                },
                'css-loader'
            ]},
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10,
                            name: 'images/[name].[ext]',
                            esModule: false,
                        }
                    }
                ],
                type: 'javascript/auto'
            },
            {
                test: /\.(htm|string)$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        esModule: false,
                        minimize: false
                    }
                }
            }
        ]
    },
    plugins:[
        //new CleanWebpackPlugin(),
        new MiniCssExtractPlugin(
            {
                filename:'css/[name].css'
            }
        ),
        new HtmlWebpackPlugin(getHtmlConfig('index')),

        new HtmlWebpackPlugin(getHtmlConfig('account/login')),
        new HtmlWebpackPlugin(getHtmlConfig('account/register')),
        new HtmlWebpackPlugin(getHtmlConfig('account/account-info')),
        new HtmlWebpackPlugin(getHtmlConfig('account/myAccount')),

        new HtmlWebpackPlugin(getHtmlConfig('cart/cart')),
        new HtmlWebpackPlugin(getHtmlConfig('cart/checkout')),

        new HtmlWebpackPlugin(getHtmlConfig('catalog/catalog-main')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog/catalog-list')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog/item')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog/search-products')),

        new HtmlWebpackPlugin(getHtmlConfig('order/confirm-order')),
        new HtmlWebpackPlugin(getHtmlConfig('order/my-orders')),
        new HtmlWebpackPlugin(getHtmlConfig('order/new-order-form')),
        new HtmlWebpackPlugin(getHtmlConfig('order/view-order')),

        new webpack.HotModuleReplacementPlugin()
    ],
    optimization:{
        minimize: true,
        minimizer:[
            new TerserPlugin({
                extractComments: false
            })
        ],
        splitChunks:{
            cacheGroups:{
                commons:{
                    name:'util',
                    chunks:'all',
                    minChunks: 2, //至少被两个文件引用过的
                    minSize: 0
                }
            }
        }
    },
    mode: 'development',
    resolve : {
        alias:{ //创建别名以便js里面可以直接调用别名而不需要写过长的路径
            util : __dirname + '/src/util',
            page : __dirname + '/src/page',
            images : __dirname + '/src/images',
            service : __dirname + '/src/service',
            node_modules : __dirname + '/node_modules'
        }
    }
};